<template>
  <!-- 选课记录展示 -->
  <div class="record-page">
    <h2>我的选课记录</h2>
    <div v-if="records.length === 0" class="no-record">
      暂无选课记录
    </div>
    <div class="record-container">
      <el-row :gutter="20">
        <el-col v-for="record in records" :key="record.cid" :xs="24" :sm="24" :md="24" :lg="24">
          <el-card class="record-card" shadow="hover" :data-cid="record.cid">
            <!-- 课程图片 -->
            <img :src="record.imagePath || '/static/images/default-course.jpg'" class="record-image" @error="handleImageError" />

            <!-- 基础信息 -->
            <div class="record-info">
              <h3>{{ record.cname }}</h3>
              <p class="text1">{{ record.intro?.text1 }}</p>
            </div>

            <!-- 展开的详细信息 -->
            <div v-if="record.showDetails" class="record-details">
              <div class="left-section">
                <el-divider />
                <h4>{{ record.cname }}</h4>
                <p class="record-time">时间：{{ record.stime }} - {{ record.etime }}</p>
                <p>价格：¥{{ record.fullPrice }}</p>
                <p class="text2">{{ record.intro?.text2 }}</p>
              </div>
              <div class="right-section">
                <!-- 教练信息 -->
                <div class="coach-info">
                  <el-avatar :src="record.coachIntro?.avatarPath || '/static/images/default-avatar.jpg'" @click="toggleCoachIntro(record)" />
                  <p class="coach-intro">
                    {{ record.coachIntro?.text1 }}
                    <span v-if="record.showCoachIntro" class="full-intro">{{ record.coachIntro?.text2 }}</span>
                  </p>
                </div>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="card-actions">
              <el-link type="info" @click="toggleDetails(record)" class="details-link">
                {{ record.showDetails ? '收起详情' : '了解详情' }}
              </el-link>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>


<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

// 选课记录数据
const records = ref([]);

// 获取选课记录
const fetchRecords = async () => {
  try {
    const uid = localStorage.getItem('uid');
    if (!uid) {
      ElMessage.error('请先登录');
      return;
    }

    const response = await axios.get('/api/enrollments', {
      params: {
        uid: uid
      }
    });

    const recordsData = response.data.map(record => {
      console.log('原始日期字段:', record.stime, record.etime); // 打印日期字段
      return {
        ...record,
        showDetails: false,
        showCoachIntro: false,
        intro: { text1: '默认介绍1', text2: '默认介绍2' },
        imagePath: record.imagePath || '/static/images/default-course.jpg',
        fullPrice: record.fullPrice,

        // 预处理日期
        stime: record.stime ? new Date(record.stime).toLocaleString() : '暂无数据',
        etime: record.etime ? new Date(record.etime).toLocaleString() : '暂无数据'
      };
    });

    // 获取每个课程的详情信息
    for (const record of recordsData) {
      try {
        const introResponse = await axios.get(`/api/courses/${record.cid}/intro`);
        record.intro = introResponse.data || { text1: '默认介绍1', text2: '默认介绍2' };
      } catch (error) {
        record.intro = { text1: '默认介绍1', text2: '默认介绍2' };
      }

      try {
        const coachIntroResponse = await axios.get(`/api/employees/${record.eid}/intro`);
        record.coachIntro = coachIntroResponse.data || { text1: '默认教练介绍1', text2: '默认教练介绍2' };

        console.log('Record Image Path:', record.imagePath);
        console.log('Coach Avatar Path:', record.coachIntro?.avatarPath);
      } catch (error) {
        record.coachIntro = { text1: '默认教练介绍1', text2: '默认教练介绍2' };
      }
    }

    records.value = recordsData;
  } catch (error) {
    ElMessage.error('获取选课记录失败');
  }
};

// 图片加载失败处理
const handleImageError = (e) => {
  e.target.src = '/static/images/default-course.jpg';
};

// 切换详情显示
const toggleDetails = (record) => {
  console.log('切换详情:', record.cid, record.showDetails); // 打印日志
  record.showDetails = !record.showDetails;
  const card = document.querySelector(`.record-card[data-cid="${record.cid}"]`);
  if (card) {
    card.classList.toggle('expanded', record.showDetails);
  }
};

// 切换教练介绍
const toggleCoachIntro = (record) => {
  record.showCoachIntro = !record.showCoachIntro;
};

// 日期格式化
const formatDate = (datetime) => {
  if (!datetime) return '暂无数据'; // 处理空值

  const date = new Date(datetime);
  if (isNaN(date.getTime())) return 'Invalid Date'; // 处理无效日期

  return date.toLocaleString();
};

// 组件挂载时获取数据
onMounted(() => {
  fetchRecords();
});
</script>

<style scoped>
.record-page {
  padding: 20px;
  background-color: #f0f4f8; /* 更浅的背景色 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.record-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.record-card {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 30px; /* 增加间距 */
  border-radius: 15px; /* 更大的圆角 */
  overflow: hidden; /* 隐藏溢出内容 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* 更强的阴影效果 */
  transition: all 0.3s ease;
  background-color: #ffffff; /* 纯白色背景 */
  border: 1px solid #eaeaea; /* 细边框 */
}

.record-card.expanded {
  transform: scale(1.03); /* 微微放大 */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* 更强的阴影效果 */
}

.record-image {
  width: 100%;
  height: 250px; /* 增加高度 */
  object-fit: cover;
  border-bottom: 1px solid #eaeaea; /* 底部细线 */
}

.record-info {
  padding: 20px;
  text-align: center;
}

.record-info h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #333;
  font-weight: 500; /* 更轻的字体重量 */
}

.record-info .text1 {
  font-size: 15px;
  color: #666;
  margin-bottom: 10px;
}

.card-actions {
  display: flex;
  justify-content: center; /* 居中对齐 */
  align-items: center;
  padding: 0 20px 20px;
}

.details-link {
  font-size: 15px;
  color: #409EFF;
  cursor: pointer;
  padding: 5px 15px;
  border: 1px solid #409EFF;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.details-link:hover {
  background-color: #409EFF;
  color: #ffffff;
  text-decoration: none;
}

.record-details {
  display: flex;
  flex-direction: row;
  gap: 30px; /* 增加间距 */
  padding: 20px;
  border-top: 1px solid #eaeaea; /* 顶部细线 */
}

.record-details .left-section {
  flex: 1;
}

.record-details .right-section {
  flex: 1;
}

.coach-info {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.coach-info .el-avatar {
  margin-right: 15px;
}

.coach-intro {
  font-size: 15px;
  color: #666;
}

.full-intro {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: #999;
}

.no-record {
  text-align: center;
  color: #999;
  font-size: 18px;
  margin-top: 50px;
}
</style>

